<template>
  <div class="stock-dashboard-cards">
    <statistic-card
      title="EARNINGS (MONTHLY)"
      value="$40,000"
      icon="fa fa-calendar-o">
    </statistic-card>
    <statistic-card
      title="EARNINGS (ANNUAL)"
      value="$215,000"
      icon="fa fa-calendar-o"
      styleType="success">
    </statistic-card>
    <statistic-card
      title="TASKS"
      value="50%"
      icon="fa fa-calendar-o"
      styleType="warning">
    </statistic-card>
    <statistic-card
      title="PENDING REQUESTS"
      value="18"
      icon="fa fa-calendar-o"
      styleType="danger">
    </statistic-card>
  </div>
  <div class="stock-dashboard-item">
    <item-tab title="Earnings Overview" style="width: 70%;">
      <high-chart :options="earningChartOptions"></high-chart>
    </item-tab>
    <item-tab title="Revenue Sources">
      <high-chart :options="revenueChartOptions"></high-chart>
    </item-tab>
  </div>

</template>

<script>
import { defineComponent } from 'vue'
import statisticCard from '@/components/statisticsCard/src/card'
import highChart from '@/components/highCharts/index';
import itemTab from '@/components/item-tab/index'

export default defineComponent({
  components: {
    statisticCard,
    highChart,
    itemTab,
  },
  setup(props, { attrs, slots, emit }) {
    const earningChartOptions = {
      chart: {
        type: 'spline'
      },
      title: {
          text: ''
      },
      series: [{
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
      }]
    }
    const revenueChartOptions = {
      chart: {
				plotBackgroundColor: null,
				plotBorderWidth: null,
				plotShadow: false,
				type: 'pie',
        spacing : [40, 0 , 40, 0],
      },
      title: {
          text: null
      },
      tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
      plotOptions: {
          pie: {
              allowPointSelect: true,
              cursor: 'pointer',
              dataLabels: {
                  enabled: false,
              },
              showInLegend: true,
          }
      },
      series: [{
          name: 'Brands',
          colorByPoint: true,
          innerSize: '50%',
          data: [
            {name:'Firefox',   y: 45.0, url : 'http://bbs.hcharts.cn'},
            ['IE',       26.8],
            ['Chrome', 12.8],
            ['Safari',    8.5],
            ['Opera',     6.2],
            ['其他',   0.7]
          ]
        }]
    }
    return {
      earningChartOptions,
      revenueChartOptions,
    }
  },
})
</script>

<style lang="scss">
  .stock-dashboard {
    &-cards {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }
    &-item {
      display: flex;
      flex-wrap: wrap;
      .item-tab {
        max-width: 58.3% !important;
      }
    }
  }
</style>
